<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>实现模拟注册及登录 | mff&#39;s personal blog</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="generator" content="Hugo 0.69.0" />
    
    
      <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    

    
    
      <link href="/hugoblog/dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css" rel="stylesheet">
    

    

    
      
    

    
    
    <meta property="og:title" content="实现模拟注册及登录" />
<meta property="og:description" content="" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/hugoblog/posts/%E5%AE%9E%E7%8E%B0%E6%A8%A1%E6%8B%9F%E6%B3%A8%E5%86%8C%E7%99%BB%E5%BD%95/" />
<meta property="article:published_time" content="2020-04-20T23:03:11+08:00" />
<meta property="article:modified_time" content="2020-04-20T23:03:11+08:00" />
<meta itemprop="name" content="实现模拟注册及登录">
<meta itemprop="description" content="">
<meta itemprop="datePublished" content="2020-04-20T23:03:11&#43;08:00" />
<meta itemprop="dateModified" content="2020-04-20T23:03:11&#43;08:00" />
<meta itemprop="wordCount" content="854">



<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="实现模拟注册及登录"/>
<meta name="twitter:description" content=""/>

  </head>

  <body class="ma0 avenir bg-near-white">

    
   
  

  <header>
    <div class="bg-black">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/hugoblog/" class="f3 fw2 hover-white no-underline white-90 dib">
      mff&#39;s personal blog
    </a>
    <div class="flex-l items-center">
      

      
        <ul class="pl0 mr3">
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/hugoblog/posts/" title="Posts page">
              Posts
            </a>
          </li>
          
        </ul>
      
      






<a href="https://www.bilibili.com/" target="_blank" class="link-transition youtube link dib z-999 pt3 pt0-l mr1" title="Youtube link" rel="noopener" aria-label="follow on Youtube——Opens in a new window">
  <svg height="32px"  style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M42.527,41.34c-0.278,0-0.478,0.078-0.6,0.244  c-0.121,0.156-0.18,0.424-0.18,0.796v0.896h1.543V42.38c0-0.372-0.062-0.64-0.185-0.796C42.989,41.418,42.792,41.34,42.527,41.34z   M36.509,41.309c0.234,0,0.417,0.076,0.544,0.23c0.123,0.155,0.185,0.383,0.185,0.682v4.584c0,0.286-0.053,0.487-0.153,0.611  c-0.1,0.127-0.256,0.189-0.47,0.189c-0.148,0-0.287-0.033-0.421-0.096c-0.135-0.062-0.274-0.171-0.415-0.313v-5.531  c0.119-0.122,0.239-0.213,0.36-0.271C36.26,41.335,36.383,41.309,36.509,41.309z M41.748,44.658v1.672  c0,0.468,0.057,0.792,0.17,0.974c0.118,0.181,0.313,0.269,0.592,0.269c0.289,0,0.491-0.076,0.606-0.229  c0.114-0.153,0.175-0.489,0.175-1.013v-0.405h1.795v0.456c0,0.911-0.217,1.596-0.657,2.059c-0.435,0.459-1.089,0.687-1.958,0.687  c-0.781,0-1.398-0.242-1.847-0.731c-0.448-0.486-0.676-1.157-0.676-2.014v-3.986c0-0.768,0.249-1.398,0.742-1.882  c0.493-0.484,1.128-0.727,1.911-0.727c0.799,0,1.413,0.225,1.843,0.674c0.429,0.448,0.642,1.093,0.642,1.935v2.264H41.748z   M38.623,48.495c-0.271,0.336-0.669,0.501-1.187,0.501c-0.343,0-0.646-0.062-0.912-0.192c-0.267-0.129-0.519-0.327-0.746-0.601  v0.681h-1.764V36.852h1.764v3.875c0.237-0.27,0.485-0.478,0.748-0.616c0.267-0.143,0.534-0.212,0.805-0.212  c0.554,0,0.975,0.189,1.265,0.565c0.294,0.379,0.438,0.933,0.438,1.66v4.926C39.034,47.678,38.897,48.159,38.623,48.495z   M30.958,48.884v-0.976c-0.325,0.361-0.658,0.636-1.009,0.822c-0.349,0.191-0.686,0.282-1.014,0.282  c-0.405,0-0.705-0.129-0.913-0.396c-0.201-0.266-0.305-0.658-0.305-1.189v-7.422h1.744v6.809c0,0.211,0.037,0.362,0.107,0.457  c0.077,0.095,0.196,0.141,0.358,0.141c0.128,0,0.292-0.062,0.488-0.188c0.197-0.125,0.375-0.283,0.542-0.475v-6.744h1.744v8.878  H30.958z M24.916,38.6v10.284h-1.968V38.6h-2.034v-1.748h6.036V38.6H24.916z M32.994,32.978c0-0.001,12.08,0.018,13.514,1.45  c1.439,1.435,1.455,8.514,1.455,8.555c0,0-0.012,7.117-1.455,8.556C45.074,52.969,32.994,53,32.994,53s-12.079-0.031-13.516-1.462  c-1.438-1.435-1.441-8.502-1.441-8.556c0-0.041,0.004-7.12,1.441-8.555C20.916,32.996,32.994,32.977,32.994,32.978z M42.52,29.255  h-1.966v-1.08c-0.358,0.397-0.736,0.703-1.13,0.909c-0.392,0.208-0.771,0.312-1.14,0.312c-0.458,0-0.797-0.146-1.027-0.437  c-0.229-0.291-0.345-0.727-0.345-1.311v-8.172h1.962v7.497c0,0.231,0.045,0.399,0.127,0.502c0.08,0.104,0.216,0.156,0.399,0.156  c0.143,0,0.327-0.069,0.548-0.206c0.22-0.137,0.423-0.312,0.605-0.527v-7.422h1.966V29.255z M31.847,27.588  c0.139,0.147,0.339,0.219,0.6,0.219c0.266,0,0.476-0.075,0.634-0.223c0.157-0.152,0.235-0.358,0.235-0.618v-5.327  c0-0.214-0.08-0.387-0.241-0.519c-0.16-0.131-0.37-0.196-0.628-0.196c-0.241,0-0.435,0.065-0.586,0.196  c-0.148,0.132-0.225,0.305-0.225,0.519v5.327C31.636,27.233,31.708,27.439,31.847,27.588z M30.408,19.903  c0.528-0.449,1.241-0.674,2.132-0.674c0.812,0,1.48,0.237,2.001,0.711c0.517,0.473,0.777,1.083,0.777,1.828v5.051  c0,0.836-0.255,1.491-0.762,1.968c-0.513,0.476-1.212,0.714-2.106,0.714c-0.858,0-1.547-0.246-2.064-0.736  c-0.513-0.492-0.772-1.152-0.772-1.983v-5.068C29.613,20.954,29.877,20.351,30.408,19.903z M24.262,16h-2.229l2.634,8.003v5.252  h2.213v-5.5L29.454,16h-2.25l-1.366,5.298h-0.139L24.262,16z M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4s30,13.431,30,30  S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/></svg>

<span class="new-window"><svg  height="8px"  style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>


<a href="https://weibo.com/" target="_blank" class="link-transition linkedin link dib z-999 pt3 pt0-l mr1" title="LinkedIn link" rel="noopener" aria-label="follow on LinkedIn——Opens in a new window">
  <svg  height="32px"  style="enable-background:new 0 0 65 65;" version="1.1" viewBox="0 0 65 65" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M50.837,48.137V36.425c0-6.275-3.35-9.195-7.816-9.195  c-3.604,0-5.219,1.983-6.119,3.374V27.71h-6.79c0.09,1.917,0,20.427,0,20.427h6.79V36.729c0-0.609,0.044-1.219,0.224-1.655  c0.49-1.22,1.607-2.483,3.482-2.483c2.458,0,3.44,1.873,3.44,4.618v10.929H50.837z M22.959,24.922c2.367,0,3.842-1.57,3.842-3.531  c-0.044-2.003-1.475-3.528-3.797-3.528s-3.841,1.524-3.841,3.528c0,1.961,1.474,3.531,3.753,3.531H22.959z M34,64  C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z M26.354,48.137V27.71h-6.789v20.427  H26.354z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>

<span class="new-window"><svg  height="8px"  style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>


<a href="https://mff-project.gitee.io/hugoblog/" target="_blank" class="link-transition github link dib z-999 pt3 pt0-l mr1" title="Github link" rel="noopener" aria-label="follow on Github——Opens in a new window">
  <svg  height="32px"  style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <path d="M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1   c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14   c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5   c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7   c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3   c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7   C480,134.8,379.7,32,256,32z"/>
</svg>

<span class="new-window"><svg  height="8px"  style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>


<a href="https://gitee.com/mff-project" target="_blank" class="link-transition gitlab link dib z-999 pt3 pt0-l mr1" title="Gitlab link" rel="noopener" aria-label="follow on Gitlab——Opens in a new window">
  <svg  height="32px"  style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"></path></svg>

<span class="new-window"><svg  height="8px"  style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>






    </div>
  </div>
</nav>

    </div>
  </header>



    <main class="pb7" role="main">
      
  
  <article class="flex-l flex-wrap justify-between mw8 center ph3">
    <header class="mt4 w-100">
      <aside class="instapaper_ignoref b helvetica tracked">
          
        POSTS
      </aside>
      




  <div id="sharing" class="mt3">

    
    <a href="https://www.facebook.com/sharer.php?u=/hugoblog/posts/%E5%AE%9E%E7%8E%B0%E6%A8%A1%E6%8B%9F%E6%B3%A8%E5%86%8C%E7%99%BB%E5%BD%95/" class="facebook no-underline" aria-label="share on Facebook">
      <svg height="32px"  style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28.765,50.32h6.744V33.998h4.499l0.596-5.624h-5.095  l0.007-2.816c0-1.466,0.14-2.253,2.244-2.253h2.812V17.68h-4.5c-5.405,0-7.307,2.729-7.307,7.317v3.377h-3.369v5.625h3.369V50.32z   M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4s30,13.431,30,30S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;"/></svg>

    </a>

    
    
    <a href="https://twitter.com/share?url=/hugoblog/posts/%E5%AE%9E%E7%8E%B0%E6%A8%A1%E6%8B%9F%E6%B3%A8%E5%86%8C%E7%99%BB%E5%BD%95/&amp;text=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" class="twitter no-underline" aria-label="share on Twitter">
      <svg height="32px"  style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M37.167,22.283c-2.619,0.953-4.274,3.411-4.086,6.101  l0.063,1.038l-1.048-0.127c-3.813-0.487-7.145-2.139-9.974-4.915l-1.383-1.377l-0.356,1.017c-0.754,2.267-0.272,4.661,1.299,6.271  c0.838,0.89,0.649,1.017-0.796,0.487c-0.503-0.169-0.943-0.296-0.985-0.233c-0.146,0.149,0.356,2.076,0.754,2.839  c0.545,1.06,1.655,2.097,2.871,2.712l1.027,0.487l-1.215,0.021c-1.173,0-1.215,0.021-1.089,0.467  c0.419,1.377,2.074,2.839,3.918,3.475l1.299,0.444l-1.131,0.678c-1.676,0.976-3.646,1.526-5.616,1.568  C19.775,43.256,19,43.341,19,43.405c0,0.211,2.557,1.397,4.044,1.864c4.463,1.377,9.765,0.783,13.746-1.568  c2.829-1.673,5.657-5,6.978-8.221c0.713-1.716,1.425-4.851,1.425-6.354c0-0.975,0.063-1.102,1.236-2.267  c0.692-0.678,1.341-1.419,1.467-1.631c0.21-0.403,0.188-0.403-0.88-0.043c-1.781,0.636-2.033,0.551-1.152-0.402  c0.649-0.678,1.425-1.907,1.425-2.267c0-0.063-0.314,0.042-0.671,0.233c-0.377,0.212-1.215,0.53-1.844,0.72l-1.131,0.361l-1.027-0.7  c-0.566-0.381-1.361-0.805-1.781-0.932C39.766,21.902,38.131,21.944,37.167,22.283z M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4  s30,13.431,30,30S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/></svg>

    </a>

    
    <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=/hugoblog/posts/%E5%AE%9E%E7%8E%B0%E6%A8%A1%E6%8B%9F%E6%B3%A8%E5%86%8C%E7%99%BB%E5%BD%95/&amp;title=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" class="linkedin no-underline" aria-label="share on LinkedIn">
      <svg  height="32px"  style="enable-background:new 0 0 65 65;" version="1.1" viewBox="0 0 65 65" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M50.837,48.137V36.425c0-6.275-3.35-9.195-7.816-9.195  c-3.604,0-5.219,1.983-6.119,3.374V27.71h-6.79c0.09,1.917,0,20.427,0,20.427h6.79V36.729c0-0.609,0.044-1.219,0.224-1.655  c0.49-1.22,1.607-2.483,3.482-2.483c2.458,0,3.44,1.873,3.44,4.618v10.929H50.837z M22.959,24.922c2.367,0,3.842-1.57,3.842-3.531  c-0.044-2.003-1.475-3.528-3.797-3.528s-3.841,1.524-3.841,3.528c0,1.961,1.474,3.531,3.753,3.531H22.959z M34,64  C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z M26.354,48.137V27.71h-6.789v20.427  H26.354z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>

    </a>
  </div>

      <h1 class="f1 athelas mt3 mb1">实现模拟注册及登录</h1>
      
      
      <time class="f6 mv4 dib tracked" datetime="2020-04-20T23:03:11&#43;08:00">April 20, 2020</time>

      
      
    </header>
    <div class="nested-copy-line-height lh-copy serif f4 nested-links nested-img mid-gray pr4-l w-two-thirds-l"><h3 id="实现模拟注册及登录">实现模拟注册及登录</h3>
<hr>
<p>Django后端</p>
<ol>
<li>app中新建一个user.py文件</li>
</ol>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 导入加密库</span>
<span style="color:#f92672">import</span> hashlib
<span style="color:#75715e"># 导入API视图</span>
<span style="color:#f92672">from</span> rest_framework.views <span style="color:#f92672">import</span> APIView
<span style="color:#75715e"># 这里的导入以实现了迁移文件的models文件中的模型</span>
<span style="color:#f92672">from</span> myapp.models <span style="color:#f92672">import</span> User
<span style="color:#75715e"># 返回前端数据响应的包</span>
<span style="color:#f92672">from</span> rest_framework.response <span style="color:#f92672">import</span> Response

<span style="color:#75715e"># md5加密方法</span>
<span style="color:#66d9ef">def</span> <span style="color:#a6e22e">make_password</span>(mypass):
    <span style="color:#75715e"># 生成md5对象</span>
    md5 <span style="color:#f92672">=</span> hashlib<span style="color:#f92672">.</span>md5()
    <span style="color:#75715e"># 转码操作</span>
    mypass_utf8 <span style="color:#f92672">=</span> str(mypass)<span style="color:#f92672">.</span>encode(encoding<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;utf-8&#34;</span>)
    <span style="color:#75715e"># 加密操作</span>
    md5<span style="color:#f92672">.</span>update(mypass_utf8)
    <span style="color:#75715e"># 返回密文</span>
    <span style="color:#66d9ef">return</span> md5<span style="color:#f92672">.</span>hexdigest()

<span style="color:#75715e"># 注册接口</span>
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Register</span>(APIView):
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
        <span style="color:#75715e"># 接收参数</span>
        username <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;username&#39;</span>,None)
        password <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;password&#39;</span>,None)
        <span style="color:#75715e"># 排除重复</span>
        user <span style="color:#f92672">=</span> User<span style="color:#f92672">.</span>objects<span style="color:#f92672">.</span>filter(username<span style="color:#f92672">=</span>username)<span style="color:#f92672">.</span>first()
        <span style="color:#66d9ef">if</span> user:
            <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#39;code&#39;</span>:<span style="color:#ae81ff">403</span>,<span style="color:#e6db74">&#39;message&#39;</span>:<span style="color:#e6db74">&#39;用户名已存在&#39;</span>})
        <span style="color:#75715e"># 入库</span>
        user <span style="color:#f92672">=</span> User(username<span style="color:#f92672">=</span>username,password<span style="color:#f92672">=</span>make_password(password))
        <span style="color:#75715e"># 保存结果</span>
        user<span style="color:#f92672">.</span>save()
        <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#39;code&#39;</span>:<span style="color:#ae81ff">200</span>,<span style="color:#e6db74">&#39;message&#39;</span>:<span style="color:#e6db74">&#39;注册成功&#39;</span>})
    
<span style="color:#75715e"># 登录接口</span>
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Login</span>(APIView):
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
        <span style="color:#75715e"># 接收参数</span>
        username <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;username&#39;</span>,None)
        password <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;password&#39;</span>,None)

        <span style="color:#75715e"># 查询数据</span>
        user <span style="color:#f92672">=</span> User<span style="color:#f92672">.</span>objects<span style="color:#f92672">.</span>filter(username<span style="color:#f92672">=</span>username,password<span style="color:#f92672">=</span>make_password(password))<span style="color:#f92672">.</span>first()
        <span style="color:#66d9ef">if</span> user:
            <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#39;code&#39;</span>:<span style="color:#ae81ff">200</span>,<span style="color:#e6db74">&#39;message&#39;</span>:<span style="color:#e6db74">&#39;登录成功&#39;</span>,<span style="color:#e6db74">&#39;uid&#39;</span>:user<span style="color:#f92672">.</span>id,<span style="color:#e6db74">&#39;username&#39;</span>:user<span style="color:#f92672">.</span>username})
        <span style="color:#66d9ef">else</span>:
            <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#39;code&#39;</span>:<span style="color:#ae81ff">403</span>,<span style="color:#e6db74">&#39;message&#39;</span>:<span style="color:#e6db74">&#39;您的用户名或密码错误&#39;</span>})
</code></pre></div><ol start="2">
<li>配置好注册及登录URL，后端实现注册及登录接口</li>
</ol>
<hr>
<p>vue.js前端</p>
<ol>
<li>
<p>新建register.vue文件</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">myheader</span>&gt;&lt;/<span style="color:#f92672">myheader</span>&gt;
   
        &lt;<span style="color:#f92672">section</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;featured-block text-center&#34;</span>&gt;
            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;container&#34;</span>&gt;
                &lt;<span style="color:#f92672">div</span>&gt;
                    &lt;<span style="color:#f92672">Breadcrumb</span> <span style="color:#f92672">:datas</span><span style="color:#e6db74">=&#34;datas&#34;</span>&gt;&lt;/<span style="color:#f92672">Breadcrumb</span>&gt;
                &lt;/<span style="color:#f92672">div</span>&gt;
            &lt;/<span style="color:#f92672">div</span>&gt;
        &lt;/<span style="color:#f92672">section</span>&gt;
        &lt;<span style="color:#f92672">div</span>&gt;
            &lt;<span style="color:#f92672">table</span>&gt;
                &lt;<span style="color:#f92672">tr</span>&gt;
                    &lt;<span style="color:#f92672">td</span>&gt;
                        <span style="color:#a6e22e">用户名</span><span style="color:#960050;background-color:#1e0010">：</span>
                    &lt;/<span style="color:#f92672">td</span>&gt;
                    &lt;<span style="color:#f92672">td</span>&gt;
                        &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#f92672">v-model</span><span style="color:#e6db74">=&#34;username&#34; placeholder=&#34;请输入用户名&#34;&gt;
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">                &lt;tr&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;
</span><span style="color:#e6db74">                        密码：
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;
</span><span style="color:#e6db74">                        &lt;input type=&#34;password&#34; v-model=&#34;password&#34; placeholder=&#34;请输入密码&#34;&gt;
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">                &lt;tr&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;&lt;/td&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;&lt;Button @click=&#34;submit&#34; color=&#34;blue&#34;&gt;提交&lt;/Button&gt;&lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">            &lt;/table&gt;
</span><span style="color:#e6db74">        &lt;/div&gt;
</span><span style="color:#e6db74">        &lt;footer class=&#34;footer&#34;&gt;
</span><span style="color:#e6db74">            &lt;div class=&#34;container&#34;</span>&gt;
                <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">v3u.cn</span>
            &lt;/<span style="color:#f92672">div</span>&gt;
        &lt;/<span style="color:#f92672">footer</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
     
&lt;/<span style="color:#f92672">template</span>&gt;
   
&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">myheader</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./myheader.vue&#39;</span>
<span style="color:#75715e">// 导入组件
</span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">data</span>(){
        <span style="color:#66d9ef">return</span>{
            <span style="color:#75715e">// 表单数据
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">username</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
            <span style="color:#a6e22e">password</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
            <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;这是一个变量&#34;</span>,
            <span style="color:#75715e">// 面包屑导航变量
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">datas</span><span style="color:#f92672">:</span>[{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;首页&#39;</span>,<span style="color:#a6e22e">route</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;index&#39;</span>}},{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;注册页面&#39;</span>}]
        }
    },
    <span style="color:#75715e">// 引入header头部样式组件
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
        <span style="color:#e6db74">&#39;myheader&#39;</span><span style="color:#f92672">:</span><span style="color:#a6e22e">myheader</span>
    },
    <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
   
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">submit</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
            <span style="color:#75715e">// 用户名非空验证
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;&#39;</span>){
                <span style="color:#75715e">// 自动化页面组件提供的样式，用于前端弹出信息
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;您没有输入用户名&#39;</span>);
                <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
            }
            <span style="color:#75715e">// 密码非空验证
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">password</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;&#39;</span>){
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;您没有输入密码&#39;</span>);
                <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
            }
            <span style="color:#75715e">// 请求后台接口
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;http://127.0.0.1:8000/register/&#39;</span>,{<span style="color:#a6e22e">params</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">username</span><span style="color:#f92672">:</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span>,<span style="color:#a6e22e">password</span><span style="color:#f92672">:</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">password</span>}}).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">result</span>)=&gt;{
                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">result</span>);
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>);
            })
        }
    }
   
}
&lt;/<span style="color:#f92672">script</span>&gt;
   
&lt;<span style="color:#f92672">style</span>&gt;
    <span style="color:#a6e22e">td</span> {
        <span style="color:#a6e22e">padding</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10</span><span style="color:#a6e22e">px</span>;
    }
&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div></li>
<li>
<p>配置好register前端路由，启动服务</p>
</li>
<li>
<p>新建login.vue文件(这里的实现登录逻辑与注册差不多一样)</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">myheader</span>&gt;&lt;/<span style="color:#f92672">myheader</span>&gt;
   
        &lt;<span style="color:#f92672">section</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;featured-block text-center&#34;</span>&gt;
            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;container&#34;</span>&gt;
                &lt;<span style="color:#f92672">div</span>&gt;
                    &lt;<span style="color:#f92672">Breadcrumb</span> <span style="color:#f92672">:datas</span><span style="color:#e6db74">=&#34;datas&#34;</span>&gt;&lt;/<span style="color:#f92672">Breadcrumb</span>&gt;
                &lt;/<span style="color:#f92672">div</span>&gt;
            &lt;/<span style="color:#f92672">div</span>&gt;
        &lt;/<span style="color:#f92672">section</span>&gt;
        &lt;<span style="color:#f92672">div</span>&gt;
            &lt;<span style="color:#f92672">table</span>&gt;
                &lt;<span style="color:#f92672">tr</span>&gt;
                    &lt;<span style="color:#f92672">td</span>&gt;
                        <span style="color:#a6e22e">用户名</span><span style="color:#960050;background-color:#1e0010">：</span>
                    &lt;/<span style="color:#f92672">td</span>&gt;
                    &lt;<span style="color:#f92672">td</span>&gt;
                        &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#f92672">v-model</span><span style="color:#e6db74">=&#34;username&#34; placeholder=&#34;请输入用户名&#34;&gt;
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">                &lt;tr&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;
</span><span style="color:#e6db74">                        密码：
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;
</span><span style="color:#e6db74">                        &lt;input type=&#34;password&#34; v-model=&#34;password&#34; placeholder=&#34;请输入密码&#34;&gt;
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">                &lt;tr&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;&lt;/td&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;&lt;Button @click=&#34;submit&#34; color=&#34;blue&#34;&gt;提交&lt;/Button&gt;&lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">            &lt;/table&gt;
</span><span style="color:#e6db74">        &lt;/div&gt;
</span><span style="color:#e6db74">        &lt;footer class=&#34;footer&#34;&gt;
</span><span style="color:#e6db74">            &lt;div class=&#34;container&#34;</span>&gt;
                <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">v3u.cn</span>
            &lt;/<span style="color:#f92672">div</span>&gt;
        &lt;/<span style="color:#f92672">footer</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
     
&lt;/<span style="color:#f92672">template</span>&gt;
   
&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">myheader</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./myheader.vue&#39;</span>
<span style="color:#75715e">// 导入组件
</span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">data</span>(){
        <span style="color:#66d9ef">return</span>{
            <span style="color:#75715e">// 表单数据
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">username</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
            <span style="color:#a6e22e">password</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
            <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;这是一个变量&#34;</span>,
            <span style="color:#75715e">// 面包屑导航变量
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">datas</span><span style="color:#f92672">:</span>[{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;首页&#39;</span>,<span style="color:#a6e22e">route</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;index&#39;</span>}},{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;登录页面&#39;</span>}]
        }
    },
    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
        <span style="color:#e6db74">&#39;myheader&#39;</span><span style="color:#f92672">:</span><span style="color:#a6e22e">myheader</span>
    },
    <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
   
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">submit</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
            <span style="color:#75715e">// 用户名非空验证
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;&#39;</span>){
                <span style="color:#75715e">// 自动化页面组件提供的样式，用于前端弹出信息
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;您没有输入用户名&#39;</span>);
                <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
            }
            <span style="color:#75715e">// 密码非空验证
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">password</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;&#39;</span>){
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;您没有输入密码&#39;</span>);
                <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
            }
            <span style="color:#75715e">// 请求后台接口
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;http://127.0.0.1:8000/login/&#39;</span>,{<span style="color:#a6e22e">params</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">username</span><span style="color:#f92672">:</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span>,<span style="color:#a6e22e">password</span><span style="color:#f92672">:</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">password</span>}}).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">result</span>)=&gt;{
                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">result</span>);
                <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">code</span> <span style="color:#f92672">==</span> <span style="color:#ae81ff">403</span>){
                    <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>);
                    <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
                }
                <span style="color:#75715e">//登录成功
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">else</span>{
                <span style="color:#75715e">// 这里用于实现在前端localStorage中永久性存入用户信息，便于实现用户登录后的一些功能
</span><span style="color:#75715e"></span>                <span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">setItem</span>(<span style="color:#e6db74">&#34;username&#34;</span>,<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">username</span>);
                <span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">setItem</span>(<span style="color:#e6db74">&#34;uid&#34;</span>,<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">uid</span>);
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>);
                <span style="color:#75715e">//跳转首页
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$router</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">&#39;/&#39;</span>);
                }
            });
        }
    }
   
}
&lt;/<span style="color:#f92672">script</span>&gt;
   
&lt;<span style="color:#f92672">style</span>&gt;
    <span style="color:#a6e22e">td</span> {
        <span style="color:#a6e22e">padding</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10</span><span style="color:#a6e22e">px</span>;
    }
&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div></li>
<li>
<p>配置好login的URL</p>
</li>
<li>
<p>新建myheader.vue文件(头部样式)</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
  &lt;<span style="color:#f92672">div</span>&gt;
      &lt;<span style="color:#f92672">section</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;header text-center&#34;</span>&gt;
     &lt;<span style="color:#f92672">nav</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar navbar-expand-lg navbar-light navbar-custom&#34;</span>&gt;
         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;container&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-brand&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;index.html&#34;</span>&gt;&lt;<span style="color:#f92672">i</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fas fa-shopping-bag primary-color mr-1&#34;</span>&gt;&lt;/<span style="color:#f92672">i</span>&gt;<span style="color:#a6e22e">美多商城</span>&lt;/<span style="color:#f92672">a</span>&gt;
             &lt;<span style="color:#f92672">button</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-toggler&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-toggle</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">collapse</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-target</span><span style="color:#960050;background-color:#1e0010">=&#34;#</span><span style="color:#a6e22e">navbar</span><span style="color:#f92672">-1</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-controls</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">navbar</span><span style="color:#f92672">-1</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-expanded</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">false</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-label</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">Toggle</span> <span style="color:#a6e22e">navigation</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-toggler-icon&#34;</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">button</span>&gt;
             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;collapse navbar-collapse pull-xs-right justify-content-end&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-1&#34;</span>&gt;
                 &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-nav mt-2 mt-md-0&#34;</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item active&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Home</span> &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sr-only&#34;</span>&gt;(<span style="color:#a6e22e">current</span>)&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item dropdown mega-menu&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link dropdown-toggle&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbarDropdown&#34;</span> <span style="color:#a6e22e">role</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-toggle</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">dropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-haspopup</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">true</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-expanded</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">false</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;<span style="color:#a6e22e">Shop</span> &lt;/<span style="color:#f92672">a</span>&gt;
                         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-menu&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-labelledby</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">navbarDropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;
                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;container&#34;</span>&gt;
                                 &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;divider&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-md-2&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-uppercase&#34;</span>&gt;<span style="color:#a6e22e">Women</span><span style="color:#e6db74">&#39;s&lt;/h6&gt;
</span><span style="color:#e6db74">                                         &lt;ul class=&#34;nav flex-column&#34;&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link active&#34; href=&#34;#&#34;&gt;Active&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                         &lt;/ul&gt;
</span><span style="color:#e6db74">                                     &lt;/div&gt;
</span><span style="color:#e6db74">                                     &lt;div class=&#34;col-md-2&#34;&gt;
</span><span style="color:#e6db74">                                         &lt;h6 class=&#34;text-uppercase&#34;&gt;Men&#39;</span><span style="color:#a6e22e">s</span>&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav flex-column&#34;</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                         &lt;/<span style="color:#f92672">ul</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-md-2&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-uppercase&#34;</span>&gt;<span style="color:#a6e22e">Girl</span><span style="color:#e6db74">&#39;s&lt;/h6&gt;
</span><span style="color:#e6db74">                                         &lt;ul class=&#34;nav flex-column&#34;&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                         &lt;/ul&gt;
</span><span style="color:#e6db74">                                     &lt;/div&gt;
</span><span style="color:#e6db74">                                     &lt;div class=&#34;col-md-2&#34;&gt;
</span><span style="color:#e6db74">                                         &lt;h6 class=&#34;text-uppercase&#34;&gt;Boy&#39;</span><span style="color:#a6e22e">s</span>&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav flex-column&#34;</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                         &lt;/<span style="color:#f92672">ul</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-md-4&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-uppercase&#34;</span>&gt;<span style="color:#a6e22e">Featured</span> <span style="color:#a6e22e">Items</span>&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-6 text-center&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;
                                                 &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;img-fluid mt-2 mb-3&#34;</span>&gt;&lt;/<span style="color:#f92672">a</span>&gt;
                                                 &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;mb-0&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                                 &lt;<span style="color:#f92672">p</span>&gt;&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">p</span>&gt;
                                                 &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn btn-sm btn-outline-secondary mt-0&#34;</span>&gt;<span style="color:#a6e22e">Buy</span> <span style="color:#a6e22e">Now</span>&lt;/<span style="color:#f92672">a</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-6 text-center&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;
                                                 &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;img-fluid mt-2 mb-3&#34;</span>&gt;&lt;/<span style="color:#f92672">a</span>&gt;
                                                 &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;mb-0&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                                 &lt;<span style="color:#f92672">p</span>&gt;&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">p</span>&gt;
                                                 &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn btn-sm btn-outline-secondary mt-0&#34;</span>&gt;<span style="color:#a6e22e">Buy</span> <span style="color:#a6e22e">Now</span>&lt;/<span style="color:#f92672">a</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                         &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;/<span style="color:#f92672">div</span>&gt;
                             &lt;/<span style="color:#f92672">div</span>&gt;
                         &lt;/<span style="color:#f92672">div</span>&gt;
                     &lt;/<span style="color:#f92672">li</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item dropdown&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link dropdown-toggle&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbarDropdown&#34;</span> <span style="color:#a6e22e">role</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-toggle</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">dropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-haspopup</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">true</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-expanded</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">false</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;<span style="color:#a6e22e">Pages</span> &lt;/<span style="color:#f92672">a</span>&gt;
                         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-menu&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-labelledby</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">navbarDropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;index.html&#34;</span>&gt;<span style="color:#a6e22e">Homepage</span>&lt;/<span style="color:#f92672">a</span>&gt;
                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-divider&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;catalog.html&#34;</span>&gt;<span style="color:#a6e22e">Catalog</span>&lt;/<span style="color:#f92672">a</span>&gt;
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Item</span> <span style="color:#a6e22e">Detail</span>&lt;/<span style="color:#f92672">a</span>&gt;
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;cart.html&#34;</span>&gt;<span style="color:#a6e22e">Cart</span>&lt;/<span style="color:#f92672">a</span>&gt;
                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-divider&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;contact.html&#34;</span>&gt;<span style="color:#a6e22e">Contact</span>&lt;/<span style="color:#f92672">a</span>&gt;
   
                         &lt;/<span style="color:#f92672">div</span>&gt;
                     &lt;/<span style="color:#f92672">li</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;contact.html&#34;</span>&gt;<span style="color:#a6e22e">Contact</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                 &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item dropdown&#34;</span>&gt;&lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> /&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item dropdown&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link dropdown-toggle&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbarDropdown&#34;</span> <span style="color:#a6e22e">role</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-toggle</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">dropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-haspopup</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">true</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-expanded</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">false</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;&lt;<span style="color:#f92672">i</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fas fa-shopping-cart&#34;</span>&gt;&lt;/<span style="color:#f92672">i</span>&gt; &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;badge badge-pill badge-primary&#34;</span>&gt;<span style="color:#ae81ff">3</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">a</span>&gt;
                         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-menu dropdown-menu-right dropdown-cart&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-labelledby</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">navbarDropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;
                             &lt;<span style="color:#f92672">h6</span>&gt;<span style="color:#ae81ff">3</span> <span style="color:#a6e22e">Items</span> &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$147</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-divider&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                             &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shopping-cart-items&#34;</span>&gt;
                                 &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-3&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;60&#34;</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-9&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-muted&#34;</span>&gt;<span style="color:#ae81ff">1</span><span style="color:#a6e22e">x</span>&lt;/<span style="color:#f92672">span</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;/<span style="color:#f92672">li</span>&gt;
                                 &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-3&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;60&#34;</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-9&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-muted&#34;</span>&gt;<span style="color:#ae81ff">1</span><span style="color:#a6e22e">x</span>&lt;/<span style="color:#f92672">span</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;/<span style="color:#f92672">li</span>&gt;
                                 &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-3&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;60&#34;</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-9&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-muted&#34;</span>&gt;<span style="color:#ae81ff">1</span><span style="color:#a6e22e">x</span>&lt;/<span style="color:#f92672">span</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;/<span style="color:#f92672">li</span>&gt;
                             &lt;/<span style="color:#f92672">ul</span>&gt;
   								
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;cart.html&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn btn-lg btn-full-width btn-primary&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;margin: 0;&#34;</span>&gt;<span style="color:#a6e22e">View</span> <span style="color:#a6e22e">Cart</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                     &lt;/<span style="color:#f92672">li</span>&gt;
                 &lt;/<span style="color:#f92672">ul</span>&gt;
             &lt;/<span style="color:#f92672">div</span>&gt;
         &lt;/<span style="color:#f92672">div</span>&gt;
         &lt;<span style="color:#f92672">div</span> <span style="color:#f92672">v-if</span><span style="color:#e6db74">=&#34;username == &#39;&#39;&#34;&gt;
</span><span style="color:#e6db74">             &lt;router-link to=&#34;/login&#34;&gt;登  录&lt;/router-link&gt;
</span><span style="color:#e6db74">             /
</span><span style="color:#e6db74">             &lt;router-link to=&#34;/register&#34;&gt;注  册&lt;/router-link&gt;
</span><span style="color:#e6db74">         &lt;/div&gt;
</span><span style="color:#e6db74">         &lt;div v-else&gt;
</span><span style="color:#e6db74">             欢迎您：{{ username }}
</span><span style="color:#e6db74">             &amp;nbsp; &amp;nbsp; &amp;nbsp;
</span><span style="color:#e6db74">             &lt;Button color=&#34;black&#34; @click=&#34;submit&#34;</span>&gt;
                 <span style="color:#a6e22e">登出</span>
             &lt;/<span style="color:#f92672">Button</span>&gt;
         &lt;/<span style="color:#f92672">div</span>&gt;
     &lt;/<span style="color:#f92672">nav</span>&gt;
 &lt;/<span style="color:#f92672">section</span>&gt;
  &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;
   
&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
 <span style="color:#a6e22e">data</span> () {
     <span style="color:#66d9ef">return</span> {
     <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;这是一个变量&#34;</span>,
     <span style="color:#a6e22e">username</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&#39;</span>,
     }
  },
  <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
   <span style="color:#75715e">//判断是否登录
</span><span style="color:#75715e"></span>   <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">uname</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">getItem</span>(<span style="color:#e6db74">&#34;username&#34;</span>);
   <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">uname</span><span style="color:#f92672">==</span><span style="color:#66d9ef">null</span>){
       <span style="color:#75715e">//没登录
</span><span style="color:#75715e"></span>       <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&#39;</span>;
   }<span style="color:#66d9ef">else</span>{
     <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">uname</span>;
   }
   
  },
  <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
   <span style="color:#a6e22e">submit</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
       <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;退出成功&#39;</span>);
          <span style="color:#75715e">//清空localStorage中的用户信息
</span><span style="color:#75715e"></span>       window.<span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">clear</span>()
       <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$router</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">&#39;/login&#39;</span>);
   }
        
  }
}
&lt;/<span style="color:#f92672">script</span>&gt;
   
&lt;<span style="color:#f92672">style</span>&gt;
   
&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div><p>配置好跨域，实现前后端分离的注册登录</p>
</li>
</ol><ul class="pa0">
  
</ul>
<div class="mt6 instapaper_ignoref">
      
      
      </div>
    </div>

    <aside class="w-30-l mt6-l">




</aside>

  </article>

    </main>
    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
  <div class="flex justify-between">
  <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="/hugoblog/" >
    &copy;  mff's personal blog 2020 
  </a>
    <div>






<a href="https://www.bilibili.com/" target="_blank" class="link-transition youtube link dib z-999 pt3 pt0-l mr1" title="Youtube link" rel="noopener" aria-label="follow on Youtube——Opens in a new window">
  <svg height="32px"  style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M42.527,41.34c-0.278,0-0.478,0.078-0.6,0.244  c-0.121,0.156-0.18,0.424-0.18,0.796v0.896h1.543V42.38c0-0.372-0.062-0.64-0.185-0.796C42.989,41.418,42.792,41.34,42.527,41.34z   M36.509,41.309c0.234,0,0.417,0.076,0.544,0.23c0.123,0.155,0.185,0.383,0.185,0.682v4.584c0,0.286-0.053,0.487-0.153,0.611  c-0.1,0.127-0.256,0.189-0.47,0.189c-0.148,0-0.287-0.033-0.421-0.096c-0.135-0.062-0.274-0.171-0.415-0.313v-5.531  c0.119-0.122,0.239-0.213,0.36-0.271C36.26,41.335,36.383,41.309,36.509,41.309z M41.748,44.658v1.672  c0,0.468,0.057,0.792,0.17,0.974c0.118,0.181,0.313,0.269,0.592,0.269c0.289,0,0.491-0.076,0.606-0.229  c0.114-0.153,0.175-0.489,0.175-1.013v-0.405h1.795v0.456c0,0.911-0.217,1.596-0.657,2.059c-0.435,0.459-1.089,0.687-1.958,0.687  c-0.781,0-1.398-0.242-1.847-0.731c-0.448-0.486-0.676-1.157-0.676-2.014v-3.986c0-0.768,0.249-1.398,0.742-1.882  c0.493-0.484,1.128-0.727,1.911-0.727c0.799,0,1.413,0.225,1.843,0.674c0.429,0.448,0.642,1.093,0.642,1.935v2.264H41.748z   M38.623,48.495c-0.271,0.336-0.669,0.501-1.187,0.501c-0.343,0-0.646-0.062-0.912-0.192c-0.267-0.129-0.519-0.327-0.746-0.601  v0.681h-1.764V36.852h1.764v3.875c0.237-0.27,0.485-0.478,0.748-0.616c0.267-0.143,0.534-0.212,0.805-0.212  c0.554,0,0.975,0.189,1.265,0.565c0.294,0.379,0.438,0.933,0.438,1.66v4.926C39.034,47.678,38.897,48.159,38.623,48.495z   M30.958,48.884v-0.976c-0.325,0.361-0.658,0.636-1.009,0.822c-0.349,0.191-0.686,0.282-1.014,0.282  c-0.405,0-0.705-0.129-0.913-0.396c-0.201-0.266-0.305-0.658-0.305-1.189v-7.422h1.744v6.809c0,0.211,0.037,0.362,0.107,0.457  c0.077,0.095,0.196,0.141,0.358,0.141c0.128,0,0.292-0.062,0.488-0.188c0.197-0.125,0.375-0.283,0.542-0.475v-6.744h1.744v8.878  H30.958z M24.916,38.6v10.284h-1.968V38.6h-2.034v-1.748h6.036V38.6H24.916z M32.994,32.978c0-0.001,12.08,0.018,13.514,1.45  c1.439,1.435,1.455,8.514,1.455,8.555c0,0-0.012,7.117-1.455,8.556C45.074,52.969,32.994,53,32.994,53s-12.079-0.031-13.516-1.462  c-1.438-1.435-1.441-8.502-1.441-8.556c0-0.041,0.004-7.12,1.441-8.555C20.916,32.996,32.994,32.977,32.994,32.978z M42.52,29.255  h-1.966v-1.08c-0.358,0.397-0.736,0.703-1.13,0.909c-0.392,0.208-0.771,0.312-1.14,0.312c-0.458,0-0.797-0.146-1.027-0.437  c-0.229-0.291-0.345-0.727-0.345-1.311v-8.172h1.962v7.497c0,0.231,0.045,0.399,0.127,0.502c0.08,0.104,0.216,0.156,0.399,0.156  c0.143,0,0.327-0.069,0.548-0.206c0.22-0.137,0.423-0.312,0.605-0.527v-7.422h1.966V29.255z M31.847,27.588  c0.139,0.147,0.339,0.219,0.6,0.219c0.266,0,0.476-0.075,0.634-0.223c0.157-0.152,0.235-0.358,0.235-0.618v-5.327  c0-0.214-0.08-0.387-0.241-0.519c-0.16-0.131-0.37-0.196-0.628-0.196c-0.241,0-0.435,0.065-0.586,0.196  c-0.148,0.132-0.225,0.305-0.225,0.519v5.327C31.636,27.233,31.708,27.439,31.847,27.588z M30.408,19.903  c0.528-0.449,1.241-0.674,2.132-0.674c0.812,0,1.48,0.237,2.001,0.711c0.517,0.473,0.777,1.083,0.777,1.828v5.051  c0,0.836-0.255,1.491-0.762,1.968c-0.513,0.476-1.212,0.714-2.106,0.714c-0.858,0-1.547-0.246-2.064-0.736  c-0.513-0.492-0.772-1.152-0.772-1.983v-5.068C29.613,20.954,29.877,20.351,30.408,19.903z M24.262,16h-2.229l2.634,8.003v5.252  h2.213v-5.5L29.454,16h-2.25l-1.366,5.298h-0.139L24.262,16z M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4s30,13.431,30,30  S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/></svg>

<span class="new-window"><svg  height="8px"  style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>


<a href="https://weibo.com/" target="_blank" class="link-transition linkedin link dib z-999 pt3 pt0-l mr1" title="LinkedIn link" rel="noopener" aria-label="follow on LinkedIn——Opens in a new window">
  <svg  height="32px"  style="enable-background:new 0 0 65 65;" version="1.1" viewBox="0 0 65 65" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M50.837,48.137V36.425c0-6.275-3.35-9.195-7.816-9.195  c-3.604,0-5.219,1.983-6.119,3.374V27.71h-6.79c0.09,1.917,0,20.427,0,20.427h6.79V36.729c0-0.609,0.044-1.219,0.224-1.655  c0.49-1.22,1.607-2.483,3.482-2.483c2.458,0,3.44,1.873,3.44,4.618v10.929H50.837z M22.959,24.922c2.367,0,3.842-1.57,3.842-3.531  c-0.044-2.003-1.475-3.528-3.797-3.528s-3.841,1.524-3.841,3.528c0,1.961,1.474,3.531,3.753,3.531H22.959z M34,64  C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z M26.354,48.137V27.71h-6.789v20.427  H26.354z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>

<span class="new-window"><svg  height="8px"  style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>


<a href="https://mff-project.gitee.io/hugoblog/" target="_blank" class="link-transition github link dib z-999 pt3 pt0-l mr1" title="Github link" rel="noopener" aria-label="follow on Github——Opens in a new window">
  <svg  height="32px"  style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <path d="M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1   c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14   c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5   c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7   c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3   c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7   C480,134.8,379.7,32,256,32z"/>
</svg>

<span class="new-window"><svg  height="8px"  style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>


<a href="https://gitee.com/mff-project" target="_blank" class="link-transition gitlab link dib z-999 pt3 pt0-l mr1" title="Gitlab link" rel="noopener" aria-label="follow on Gitlab——Opens in a new window">
  <svg  height="32px"  style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"></path></svg>

<span class="new-window"><svg  height="8px"  style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>





</div>
  </div>
</footer>

    

  <script src="/hugoblog/dist/js/app.3fc0f988d21662902933.js"></script>


  </body>
</html>
